import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import {
    ListItem,
    ListInfo,
    LoadMore
} from '../style'

import {actionCreators} from '../store'

import {Link} from 'react-router-dom'

class List extends PureComponent {
    render() {
        const {getMoreList,list,page} = this.props
        return (
            <div> 
                {
                   
                   list.map((item,index)=>{
                        return  (
                             <Link  key={index} to={"/detail/" + item.get('id')}> 
                                <ListItem>
                                    <img className="pic" alt="" src={item.get('imgUrl')} />
                                    <ListInfo>
                                        <h3 className="title">{item.get('title')}</h3>
                                        <p className="desc">{item.get('desc')}</p>
                                    </ListInfo> 
                                </ListItem> 
                            </Link>    
                        )
                    })  
                }  
                
               <LoadMore onClick={()=>getMoreList(page)}>更多文章</LoadMore>
              
             
           </div>
        )
    }
}
  
const matState = (state) => ({ 
    list: state.get('home').get('articleList'),
    page: state.getIn(['home','articlePage'])
})

const mapDispatch = (dispatch) => ({
    getMoreList(page){ 
        dispatch(actionCreators.getMoreList(page))
    }
})

export default connect(matState,mapDispatch)(List)